<template>
    <!-- <div class="app" :style="{background: `center/cover url(${bgImgUrl})  no-repeat`, backgroundAttachment: 'fixed'}"> -->
    <div class="app">
        <div ref="thumbBgRef" class="background thumb-img"></div>
        <div ref="rawBgRef" class="background"></div>
        <!--  <div class="app" >-->
        <!--    <movie-card></movie-card>-->
        <!--    <artical-card></artical-card>-->
        <!--    <HomeView></HomeView>-->
        <!--  <router-link to="/">首页</router-link>-->

        <!--  网易云音乐卡片  -->
        <!--    <iframe frameborder="no" border="0" marginwidth="0 auto" marginheight="0" width=330 height=86-->
        <!--            :src="`//music.163.com/outchain/player?type=2&id=${playInfo?.id}&auto=1&height=66`"></iframe>-->

        <router-view></router-view>
        <div class="song">
            <bg-song></bg-song>
        </div>
    </div>
</template>

<script setup lang="ts">
    import { api_get_bgImg, api_get_bingimg, api_get_song } from "@/api/api_everyday";
    import { defineComponent, onMounted, ref } from "vue";
    import { useHomeStore } from "@/store/home";
    import ScrollView from "@/view/topList/ScrollView.vue";
    import BgSong from "@/components/BgSong.vue";
    import type { Song } from "@/model/song";

    const thumbBgRef = ref<HTMLDivElement>();
    const rawBgRef = ref<HTMLDivElement>();
    // 获取壁纸
    const getBgImg = async () => {
        // bing 壁纸
        // const  {data} = await api_get_bingimg()
        // bgImgUrl.value = data.url

        // unsplash 壁纸
        const { data } = await api_get_bgImg();
        const bgImgData = data[Math.floor(Math.random() * data.length)];

        if (thumbBgRef.value && rawBgRef.value) {
            // 预加载背景小图和大图，然后过渡切换透明度避免画面闪烁
            thumbBgRef.value.style.backgroundImage = `url(${bgImgData.thumb})`;
            rawBgRef.value.style.backgroundImage = `url(${bgImgData.raw})`;
        }
        const img = new Image();
        img.src = bgImgData.raw;

        // 无法监听背景图是否加载完成，因此监听了一个 img，希望 url() 能读取 img 的缓存
        // （意义不大，实际上应该是url()加载更快）
        img.addEventListener("load", () => {
            console.log(bgImgData.raw);
            if (thumbBgRef.value && rawBgRef.value) {
                thumbBgRef.value.style.opacity = "0";
                rawBgRef.value.style.opacity = "1";
            }
        });
    };
    getBgImg();

    // 获取音乐
    // const playInfo = ref<Song>()
    // async function getSongInfo() {
    //   const {data} = await api_get_song()
    //   playInfo.value = data
    // }
    //
    // getSongInfo()

    const homeData = useHomeStore();

    homeData.getHomeData();
</script>

<style scoped>
    .app {
        /*max-width: 980px;*/
        width: 100%;
        min-height: 100vh;
        height: 100vh;
        margin: 0 auto;
        overflow: auto;
        background-size: contain;
        /*background: no-repeat;*/
        background-position: center;
        background-blend-mode: multiply;
    }

    .song {
        position: absolute;
        right: 0;
        top: 0;
    }

    .background {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /* background: center/cover url(`${bgImgUrl}`) no-repeat; */
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: cover;
        background-position: center;
        transition: opacity 0.5s ease;
        z-index: -1;
    }

    .thumb-img {
        z-index: -999;
        filter: blur(10px);
    }
</style>
